<template>
  <pageHeader :title="title" :breadCrumb="breadCrumb" :show-back="true">
    <div>
      <a-button type="primary" @click="PutData">保存</a-button>
    </div>
  </pageHeader>
  <TableTurn
    ref="tableTurnRef"
    :args="args"
    :table-data="getData"
    style="padding: 0 20px; margin-top: 20px"
  >
    <a-table-column :width="70" align="center">
      <template #title> 序号 </template>
      <template #cell="{ rowIndex }">
        {{ rowIndex + 1 }}
      </template>
    </a-table-column>
    <a-table-column
      title="负荷等级"
      align="center"
      data-index="name"
    ></a-table-column>
    <a-table-column title="产能负荷比例" align="center" data-index="value">
      <template #cell="{ record }">
        <a-space>
          产能负荷≤
          <a-input-number :min="1" v-model="record.value" hide-button>
            <template #suffix> % </template>
          </a-input-number>
        </a-space>
      </template>
    </a-table-column>
  </TableTurn>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import {
    GetCapacityLoads,
    PutCapacityLoad,
  } from '@/api/equipment-management/base-setting';

  const title: string = '设备负荷设置';
  const breadCrumb: string[] = ['设备管理', '基础设置', '设备负荷设置'];

  // 表格配置
  const args = reactive({
    stripe: true,
    bordered: {
      headerCell: true,
    },
    rowKey: 'code',
  });

  const tableTurnRef = ref();

  // 获取表格数据
  const getData = async () => {
    try {
      const res = await GetCapacityLoads();
      return Promise.resolve(res);
    } catch (err: unknown) {
      console.log(err);
    }
  };
  const PutData = async () => {
    for (const item of tableTurnRef.value.tableList) {
      // eslint-disable-next-line no-await-in-loop
      await PutCapacityLoad(item);
    }
    tableTurnRef.value.loadData();
  };
</script>

<style lang="less" scoped></style>
